<template>
  <div ref="bar" class="chart"></div>
</template>
<script setup>
import { ref, defineProps, onMounted, watch, onBeforeUnmount } from 'vue';
import * as eCharts from 'echarts';
import {getScale, calculateChartGrid} from './ChartUtils.js';

const bar = ref(null);

const props = defineProps({
  colorArray: {
    type: Array,
    default: () => [
      ['rgba(41, 126, 243, 0.25)', 'rgba(24, 71, 143, 0.25)', 'rgba(9, 35, 57, 0.25)'],
      ['rgba(0, 191, 255, 0.25)', 'rgba(2, 155, 209, 0.25)', 'rgba(9, 35, 57, 0.25)'],
      ['rgba(17, 155, 254, 0.25)', 'rgba(15, 120, 197, 0.25)', 'rgba(9, 35, 57, 0.25)'],
      ['rgba(52, 195, 225, 0.25)', 'rgba(38, 143, 171, 0.25)', 'rgba(9, 35, 57, 0.25)'],
      ['rgba(52, 195, 225, 0.25)', 'rgba(38, 143, 171, 0.25)', 'rgba(9, 35, 57, 0.25)']
    ]
  },
  data: {
    type: Array,
    default: () => []
  },
  legend: {
    type: Array,
    default: undefined
  },
  fontSize: {
    type: Number,
    default: 14
  }
});

watch(() => props.data, (v) => {
  if (chart && v.length > 0) {
    const { legend, colorArray } = props;
    let option = getOption(v, legend, colorArray);
    chart.setOption(option, true);
  }
});

let chart;
onMounted(() => {
  const barDom = bar.value;
  chart = eCharts.init(barDom);
  const { legend, data, colorArray } = props;
  if (data.length > 0) {
    let option = getOption(data, legend, colorArray);
    chart.setOption(option);
  }
  window.addEventListener('resize', resize);
});

/**组件取消挂载之前 */
onBeforeUnmount(()=>{
  window.removeEventListener('resize', resize);
})

/**图表大小变化重新渲染 */
const resize = () =>{
  if (chart) {
    const { legend, data, colorArray } = props;
    let option = getOption(data, legend, colorArray);
    chart.setOption(option, true);
    chart.resize();
  }
}

/**获取默认图表配置 */
const getDefaultOption = () =>{
  return {
    tooltip: {
      trigger: 'axis',
      show: true
    },
    grid: calculateChartGrid(undefined, undefined, undefined, 56*getScale()),
    textStyle: {
      fontSize: getScale()*props.fontSize,
      color: 'white'
    },
    yAxis: {
      type: 'value',
      // max: function (value) {
      //   return value.max*1.2;
      // },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'white'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        fontSize: getScale()*props.fontSize
      }
    },
    xAxis: {
      type: '',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'white'
        }
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: 'white'
        }
      },
      axisLabel: {
        fontSize: getScale()*props.fontSize
      }
    },
    series: []
  }
}
/**
 * 深度合并对象
 */
const deepObjectMerge = (targ, source) => {
  const target = targ;
  for (const key in source) {
    if (key.hasOwnProperty) {
      target[key] =
        target[key] && typeof target[key] === 'object'
          ? deepObjectMerge(target[key], source[key])
          : (target[key] = source[key]);
    }
  }
  return target;
};

/**
 * 组装图表series值
 */
const getOption = (data, legendData, colorArray) => {
  let series = [];
  let xAxis = {};
  data.forEach((item, index) => {
    const s = getSerie(item, colorArray[index], legendData[index], index);
    series.push(s);
  });
  let legend = {
    show: true,
    data: legendData,
    bottom: 0 ,
    itemWidth: getScale()*12,
    itemHeight: getScale()*12,
    icon: 'circle',
    textStyle: {
      color: 'rgba(255,255,255,0.85)',
      fontSize: getScale()*14
    }
  };
  xAxis.data = data[0].map(item => item.name);
  const option = deepObjectMerge(getDefaultOption(), {
    xAxis,
    legend,
    series
  });
  return option;
};

/**
 * 组装图表series值
 */
const getSerie = (data, color, name) => {
  data[data.length-1].symbol = 'circle';
  data[data.length-1].symbolSize = getScale()*10;
  return {
    type: 'line',
    data,
    smooth: true,
    symbol: 'none',
    itemStyle: {
      color: getLineColor(color[0])
    },
    lineStyle:{
      width: 1
    },
    name,
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: color[0] },
          { offset: 0.5, color: color[1] },
          { offset: 1, color: color[2] },
        ]
      }
    }
  };
};
/**获取线条颜色 */
const getLineColor = (color) =>{
  let ca = color.split(',');
  ca[3] = ' 1)';
  return ca.join(',');
}

</script>
<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
